<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>3D Animation</title>
		<link rel="stylesheet" type="text/css" href="css/program.css" />
	</head>

	<body>
		<!--头部区域-->
		<header>
			<!--插入logo-->
			<div id="logo">
				<img src="img/img1/shininglogo.png" />
			</div>
			<!--导航栏-->
			<div id="navigation">
				<a href="home.html">Home</a>
				<a href="about.html">About</a>
				<a href="rendering.html">Rendering</a>
				<a href="3DAnimation.html">3D Animation</a>
				<a href="Bin.html">Bin</a>
				<a href="contact.html">Contact</a>
			</div>
			<div id="navigationMerge">
				<img src="img/img1/nav.png" />
			</div>
		</header>
		<ul id="navigationHidden">
			<li>
				<a href="home.html">Home</a>
			</li>
			<li>
				<a href="about.html">About</a>
			</li>
			<li>
				<a href="rendering.html">Rendering</a>
			</li>
			<li>
				<a href="3DAnimation.html">3D Animation</a>
			</li>
			<li>
				<a href="Bin.html">Bin</a>
			</li>
			<li>
				<a href="contact.html">Contact</a>
			</li>
		</ul>
		<!--内容区域-->
		<div id="animationContent">
			<div id="animationTop">
				<img src="img/img4/2-150Z2105915292.jpg" />
			</div>
			<ul id="animationBottom">
				<li>
					<a href=""><img src="img/img4/1-1510121R410H3.jpg" /></a>
					<a href=""><img src="img/img4/1-1510121SHX34.jpg" /></a>
					<a href=""><img src="img/img4/1-1510121T91XV.jpg" /></a>
				</li>
				<li>
					<a href=""><img src="img/img4/1-1510121TP0U1.jpg" /></a>
					<a href=""><img src="img/img4/1-1510121U004292.jpg" /></a>
					<a href=""><img src="img/img4/1-1510121U004292.jpg" /></a>
				</li>
				<li>
					<a href=""><img src="img/img4/1-1510121U04XL.jpg" /></a>
					<a href=""><img src="img/img4/1-1510121U305330.jpg" /></a>
					<a href=""><img src="img/img4/1-1510121U33Ic.jpg" /></a>
				</li>
			</ul>
		</div>
		<footer>
			<div id="footerTop">
				<img src="img/img1/footer0.jpg" />
			</div>
			<div id="footerCenter">
				<img src="img/img1/footer1.jpg" />
				<img src="img/img1/footer2.jpg" />
				<img src="img/img1/footer3.jpg" />
				<img src="img/img1/footer4.jpg" />
			</div>
			<div id="footerBottom">
				Copyright © 1998-2015 shining Group
			</div>
		</footer>
		<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jsPicture.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		function heightChange () {
			var a  = $("header").height() ;
			var b =  $("#animationTop img").height();
			var c = $("#animationBottom").height();
			$("footer").css({
				height:120,
	            top: a * 3 + b + c 
			});
		}
			setInterval(heightChange,100);
			$("#animationBottom>li>a").append($("<p>卖房啦</p>"));
			$("#animationBottom>li>a").css("text-decoration","none");
			$("#animationBottom>li>a>p").css({
				width:60,
				position:"absolute",
				left:0,
				right:0,
				margin:"auto",
				color:"black"
			})
			$("#animationBottom>li>a").append($("<img />").attr({
				src:"img/img4/play_small_h.png",
				class:"playImg"}))
			$("#animationBottom>li>a").css("position","relative")
			$("#animationBottom>li>a .playImg").css({
				position:"absolute",
				left:"0",
				right:"0",
				top:"0",
				bottom:"0",
				margin:"auto"
			})
			$("#animationBottom>li>a").mouseenter(function  () {
				$(this).find(".playImg").attr("src","img/img4/play_small_b.png")
			})
			$("#animationBottom>li>a").mouseleave(function  () {
				$(this).find(".playImg").attr("src","img/img4/play_small_h.png")
			})
		</script>
	</body>

</html>